<script lang="ts" setup>
import { ref, h, reactive, onMounted,onBeforeMount } from "vue";
import { ReVxeGrid } from "@/components/ReVxeTable";
import { VxeGridPropTypes, VxeUI } from "vxe-table";
import { VxeFormProps, VxeButton,VxeCheckbox,VxeImage } from "vxe-pc-ui";
import { ElMessage } from "element-plus";
import { exportFile } from "@/api/export";
import { baseUrlApi } from "@/api/utils";
import { getInfoTax,listByTax } from "@/api/capital/capital";
import {
  MerchantsInfoByTaxSourcesId,
} from "@/api/welcome";
import { useRouter } from "vue-router";
const router = useRouter();
const reVxeGridRef = ref();
let taxSourcesId = Number(sessionStorage.getItem("taxSourcesId"))
onMounted(() => {
  getMerchantsInfoByTaxSourcesId( taxSourcesId )  
  // getstate();//批次状态
  getInfoTaxDetail()
});
interface RestaurantItem {
  id: number
  value: string
}
const listMerchantsInfoByTaxSourcesId = ref<RestaurantItem[]>([]);
const getMerchantsInfoByTaxSourcesId = (taxSourcesId?:
  number): void => {
  MerchantsInfoByTaxSourcesId(taxSourcesId).then((res: any) => {
    listMerchantsInfoByTaxSourcesId.value = res.data;
  });
};
// 批次状态
const stateOptions = ref<any[]>([
  {
    label: "成功",
    value: 6
  },
  {
    label: "失败",
    value: 8
  }
]);
// 获取税务端资金发放记录量资金金额
const InfoTaxDetail = ref<any>({});
const getInfoTaxDetail = (): void => {
  getInfoTax(
    {
    pageNum: 1,
    pageSize: 10,
    taxSourcesId: taxSourcesId
  }
  ).then((res: any) => {
    InfoTaxDetail.value = res.data;
  });
};

const columns: VxeGridPropTypes.Columns<any> = [
  {
    title: "交易批次号",
    field: "batchNumber",
    align: "center",
    minWidth: 100,
    showOverflow: true
  },
  {
    title: "合作公司",
    field: "merchantsInfoIdDisplay",
    align: "center",
    minWidth: 100,    
  }, 
  {
    title: "业务公司",
    field: "taxSourcesIdDisplay",
    align: "center",
    minWidth: 100,    
  }, 
  {
    title: "下发总额",
    field: "totalActualAmount",
    align: "center",
    minWidth: 60,    
  }, 
  {
    title: "服务费总额（元）",
    field: "totalServiceFee",
    align: "center",
    minWidth: 60,    
  },
  {
    title: "支付总额/（元）",
    field: "totalPayable",
    align: "center",
    minWidth: 60,    
  }, 
  {
    title: "实发笔数/应发笔数",
    field: "shouldNumber",
    align: "center",
    minWidth: 60, 
    slots: {
      default: ({ row }) => {
        return `${row.realNumber ? row.realNumber : '0'}/${row.shouldNumber ? row.shouldNumber : '0'}`
       }
    }  
  },
  {
    title: "提交发放时间",
    field: "confirmMoneyTime",
    align: "center",
    minWidth: 60,    
  }, 
  {
    title: "申请时间",
    field: "createTime",
    align: "center",
    minWidth: 60,    
  },   
  {
    title: "操作",
    field: "operate",
    align: "center",
    minWidth: 140,
    slots: {
      default: ({ row }) => {
        return [
          h(VxeButton, {
              status: "primary",
              mode: "text",
              size: "mini",
              content: "查看",
               onClick() {
                router.push({
                  path: '/capitalManage/grant',
                  query: {
                    batchNumber: row.batchNumber
                  }
                })              
              }
            })            
          ]
      }
    }
  }
   
];
//导出
const toexport = () => {
  if (formOptions.data?.timeRang?.length) {
    formOptions.data.createTimeStart = formOptions.data.timeRang[0];
    formOptions.data.createTimeEnd = formOptions.data.timeRang[1];
  } else {
    formOptions.data.createTimeStart = '';
    formOptions.data.createTimeEnd = '';
  }
  let data = formOptions.data;
  delete data['timeRang']
  // exportFile
  exportFile(baseUrlApi("business/salary_payment_schedule/exportListByTax"),data)
}
// 筛选相关
const formRef = ref();
interface FormDataVO {  
  taxSourcesId: number | string; // 税源地 
  batchNumber: string;//交易批次号
  merchantsInfoId: string  //合作公司
  state:string;//批次状态
  createTimeStart: number | string; //开始日期
  createTimeEnd: number | string; //结束日期
}
const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    batchNumber: '',
    taxSourcesId: taxSourcesId, 
    state:"",
    createTimeStart: "",
    createTimeEnd: "", 
    merchantsInfoId:''
  },
  items: [
    {
      field: "batchNumber",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "batchNumber" }
    },  
    {
      field: "merchantsInfoId",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "merchantsInfoId" }
    },
    {
      field: "state",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "state" }
    },
    {
      field: "timeRang",
      title: "",
      span: 6,
      itemRender: {},
      slots: { default: "timeRang" }
    },   
    { align: "left", span: 4, slots: { default: "active" } }
  ]
});
// 重置内容
const handleInitialFormParams = () => {
  formOptions.data = <FormDataVO>{
    taxSourcesId: '',
    batchNumber: '',
    state:"",
    createTimeStart: "",
    createTimeEnd: "",
    timeRang: [],
    merchantsInfoId:''
  };
};
const handleSearch = () => {
  if (formOptions.data?.timeRang?.length) {
    formOptions.data.createTimeStart = formOptions.data.timeRang[0];
    formOptions.data.createTimeEnd = formOptions.data.timeRang[1];
    delete formOptions.data.timeRang;
  }
  reVxeGridRef.value.loadData();
};
const handleReset = async () => {
  await handleInitialFormParams();
  reVxeGridRef.value.loadData("reset");
};

const handleView = (record: Recordable) => {
  
};
const functions: Record<string, string> = {
  add: "platform.client.index.add",
  edit: "platform.client.index.edit",
  view: "platform.client.index.view",
  delete: "platform.client.index.delete"
};


</script>
<template>
  <div>
    <el-card :shadow="`never`">
      <vxe-form ref="formRef" v-bind="formOptions">
        <template #batchNumber="{ data }">
          <el-input
            clearable
            placeholder="请输入交易批次号"
            v-model="data.batchNumber"
          ></el-input>
        </template>
        <template #merchantsInfoId="{ data }">
          <el-select
            clearable
            placeholder="请选择合作公司"
            v-model="data.merchantsInfoId"
          >
            <el-option
              v-for="(item, index) in listMerchantsInfoByTaxSourcesId"
              :key="index"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
        <template #state="{ data }">
          <el-select clearable placeholder="请选择批次状态" v-model="data.state">
            <el-option
              v-for="(item, index) in stateOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>       
        <template #timeRang="{ data }">
          <el-date-picker
            clearable
            style="width: 100%"
            v-model="data.timeRang"
            type="daterange"
            range-separator="-"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </template>     
        <template #active>
          <el-button @click="handleSearch" native-type="submit" type="primary"
            >搜索</el-button
          >
          <el-button @click="handleReset" native-type="reset">重置</el-button>          
        </template>
      </vxe-form>
      <div class="mt-3">
        <el-button @click="toexport" type="primary">导出</el-button>
      </div>
    </el-card>
    <el-row :gutter="16" style="margin:20px 0px">       
        <el-col :span="10">
          <el-card :shadow="`never`"> 
            <div class="mx-content">
              <div class="mx-item">
                <view class="mx-label" type="info">下发总额（元）</view>
                <view class="mx-text" type="info">{{ InfoTaxDetail.totalAmountOfIssued }}</view>
              </div>
              <div class="mx-item">
                <el-text class="mx-label" type="info">服务费总额（元）</el-text>
                <el-text class="mx-text" type="info">{{ InfoTaxDetail.totalTaxAmount }}</el-text>
              </div>
            </div>
          </el-card>
    </el-col>
  </el-row>
    <el-card :shadow="`never`" class="table-card">
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="listByTax"
        :functions="functions"
        :searchParams="formOptions.data"
        :columns="columns"
        :action="false"
        @handleView="handleView"
      />
    </el-card>
  </div>
</template>
<style>
.mx-content{
  display: flex;
  justify-content: space-around;
}
.mx-item{
  margin-bottom:6px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.mx-label{
  font-size: 14px;
  color:#27344B;
  line-height:23px;
}
.mx-text{
  font-weight: 600;
font-size: 18px;
color: #FF6A00;
line-height: 25px;
  
}
</style>
